<template>
    <div class="tabs">
        <el-tag :closable="item.name === 'home' ? false : true" @close="tagClose(item)" @click="tagClick(item, $event)" v-for="item in tags" :key="item.path" class="navtag" size="small" :effect="$route.name == item.name ? 'dark' : 'plain'">{{ item.label }}</el-tag>
    </div>
</template>
<script>
import { mapState } from 'vuex'; 
export default {
    name: 'CommonTag',
    data() {
        return {
            
        }
    },
    methods: {
        tagClose(item) {
            let index = this.tags.findIndex(ele => ele.name === item.name) - 1;
            if(item.name === this.nowTag.name) {
                this.$router.push({
                    name: this.tags[index].name
                }).catch(err => {console.log('error:', err)});
            }
            this.$store.commit('deleteMenu', item);
        },
        tagClick(item) {
            this.$router.push({
                name: item.name
            }).catch(err => {console.log('error:', err)});
            this.$store.commit('selectMenu', item);
        }
    },
    computed: {
        ...mapState({
            tags: state => state.tab.tabList,
            nowTag: state => state.tab.currentMenu
        })
    }
}
</script>
<style scoped>
    .tabs {
        margin-top: 10px;
    }
    .navtag {
        margin-right: 10px;
        cursor: pointer;
    }
</style>